<template>
    <div class="demo">
        <h1>{{msg}}</h1>
        <h2>学生名称: {{name}}</h2>
        <h2>年龄: {{age}}</h2>
        <h2>性别: {{gender}}</h2>
    </div>
</template>

<script>

    export default {
        name: 'StudentCopyComponent',
        data() {
            return {
                msg: "学生信息",
                name: '清华大学Copy', //固定数据, 支持用标签的地方传参
                age: 18,
                gender: '男'
            }
        },
    }    
</script>

<!-- 不同组件中的样式名重名会发生冲突, 后引入的会覆盖先引入的插件的同名样式, 可以通过scope限制作用范围, 默认全局, lang 声明css语言 支持less 等写法 -->
<style scoped>
    .demo {
        background-color: #f00;
    }
</style>